<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="page/breastmilk/css/breastmilkSetList.css" />
    <style>
        .wrapper .content {
            padding: 20px;
        }
        .wrapper .ctrl {
            height: auto;
            padding-bottom: 0;
        }
        .wrapper .ctrl .block {
            width: 210px;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 10px;
        }
        .wrapper .ctrl .block .key {
            width: 70px;
        }
        .wrapper .content {
            padding-top: 0;
        }
        .el-table--border, .el-table--group {
            border: 1px solid #ddd;
        }
        .el-table td, .el-table th.is-leaf {
            border-bottom: 1px solid #ddd;   
        }
        .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #ddd;
        }
        .el-table--enable-row-transition .el-table__body td {
            padding: 4px 0;
        }
    </style>
</head>
<body>
    <div id="root" class="wrapper">
        <div class="title">备乳录入</div>
        <div class="ctrl">
            <div class="block">
                <span class="key">宝宝姓名</span>
                <el-input v-model="search.name" size="small" style="width: 130px;" placeholder="请输入姓名" />
            </div>
            <div class="block">
                <span class="key">联系方式</span>
                <el-input v-model="search.phone" size="small" style="width: 130px;" placeholder="请输入姓名" />
            </div>
            <div class="block">
                <span class="key">住院号</span>
                <el-input v-model="search.No" size="small" style="width: 130px;" placeholder="请输入住院号" />
            </div>
            <div class="block">
                <span class="key">床号</span>
                <el-input v-model="search.BedNo" size="small" style="width: 130px;" placeholder="请输入床号" />
            </div>
            <div class="block">
                <span class="key">医院病区</span>
                <el-select v-model="search.wardNo" size="small" style="width: 130px;">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="2w" value="2w"></el-option>
                    <el-option label="3w" value="3w"></el-option>
                    <el-option label="7w" value="7w"></el-option>
                    <el-option label="15w" value="15w"></el-option>
                    <el-option label="16w" value="16w"></el-option>
                    <el-option label="22w" value="22w"></el-option>
                </el-select>
            </div>
            <div class="block">
                <el-button type="primary" size="small" @click="handleSearch" :loading="search.loading">搜索</el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="table.data" ref="data" v-loading="table.loading" border 
                element-loading-text="加载中..." :row-style="rowStyle">
                <el-table-column label="序号" align="center" prop="No" width="50px"></el-table-column>
                <el-table-column label="床号" align="center" prop="hospitalBedNo"></el-table-column>
                <el-table-column label="宝宝姓名" align="center" prop="name"></el-table-column>
                <el-table-column label="住院号" align="center" prop="inPatientNo"></el-table-column>
                <el-table-column label="当日发送次数" align="center" prop="milkPrepareCount"></el-table-column>
                <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
                <el-table-column label="操作" align="center" prop="hospitalBedNo">
                    <template slot-scope="scope">
                        <el-button style="color: #119BA9;" size="mini" @click="handleShowDialog(scope.row)">设置待备乳量</el-button>
                    </template>
                </el-table-column>
            </el-tabel>
        </div>
        
        <div class="footer">
            <el-pagination
                background
                @current-change="handleChangePage"
                @size-change="handleSizeChange"
                :page-size="table.size"
                layout="prev, pager, next, total, sizes"
                :total="table.total">
        </div>
        <el-dialog
            title="设置待备乳量"
            :visible.sync="dialog.show"
            width="35%"
            >
            <p style="font-size: 14px; margin-bottom: 20px;">姓名：{{ dialog.name }} &nbsp;&nbsp;&nbsp; 住院号：{{ dialog.hospitalNo || '无' }} &nbsp;&nbsp;&nbsp; 床号：{{ dialog.bedNo || '无' }}</p>
            <el-form label-width="120px" v-model="dialog.form">
                <el-form-item label="通知内容">
                    <el-input size="small" v-model="dialog.form.milkMsg" type="textarea" :rows="5" placeholder="请输入通知内容"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-checkbox-group v-model="remark">
                        <el-checkbox label="初乳针筒六支">初乳针筒六支</el-checkbox>
                        <el-checkbox label="巴氏消毒">巴氏消毒</el-checkbox>
                        <el-checkbox label="其它">其它</el-checkbox>
                    </el-checkbox-group>
                    <el-input v-if="remark.indexOf('其它') > -1" size="small" v-model="otherRemark" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel" size="small">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" size="small" :loading="dialog.loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
require([
    'bm/breastmilkUnsetList',
], function ($event) {
    $event.init()
})
</script>
</html>